<template>
	<!-- <uni-nav-bar style="font-weight: bold;" title="商务合作" :fixed="true" :statusBar="true" :border="false"
		leftWidth="200rpx" rightWidth="200rpx">

		<template v-slot:left>
			<view style="height: 60rpx;width: 60rpx;" @tap="nav_back">
				<image style="width: 100%;height: 100%;"
					src="https://mcdn.chatgk.com/xcx/static/images/public/nav_back.png"></image>
			</view>
		</template>
	</uni-nav-bar> -->
	<view class="content">

		<view class="flex-column container background-color-F8F8F8">
			<text class="title2">姓名</text>
			<view class="input-container">
				<image class="input-icon1" src="https://mcdn.chatgk.com/xcx/static/images/wode/xingming.png"
					mode="aspectFit">
				</image>
				<input v-model="name" class="input-score" type="text" placeholder-style="color: #CCCCCC"
					placeholder="请输入您的姓名">

			</view>
			<text class="title2">手机</text>
			<view class="input-container">
				<image class="input-icon2" src="https://mcdn.chatgk.com/xcx/static/images/wode/shouji.png"
					mode="aspectFit">
				</image>
				<input v-model="phone" class="input-score" type="number" placeholder-style="color: #CCCCCC"
					placeholder="请输入您的电话">
			</view>

			<view class="flex-row center-column">
				<view class="outbutton" @tap="clickoutbutton">
					提交
				</view>
			</view>
			<loading v-show="loadshow"></loading>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadshow: false,
				name: '',
				phone: "",
			}
		},
		methods: {
			nav_back() {
				uni.navigateBack()
			},
			clickoutbutton() {
				if (this.name == "") {
					uni.showToast({
						title: "请输入姓名",
						icon: 'none'
					})
					return
				}
				if (this.phone == "") {
					uni.showToast({
						title: "请输入联系电话",
						icon: 'none'
					})
					return
				}
				const data = {}
				data["name"] = this.name
				data["phone"] = this.phone
				this.loadshow = true
				this.$request.cooperate(data).then(res => {
					this.loadshow = false
					uni.navigateBack()
					uni.showToast({
						title: '提交成功'
					})
				})
			}
		}
	}
</script>

<style>
	.content {
		padding: 24rpx 32rpx;
		background: #F8F8F8;
	}

	.container {
		padding: 28rpx 40rpx 0rpx 40rpx;
		height: calc(100vh - 28rpx - var(--window-top));
		background: #FFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
	}

	.title2 {
		color: #464646;
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
	}

	.input-container {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 0 32rpx 0 32rpx;
		height: 104rpx;
		border-radius: 16rpx;
		border: 1rpx solid #CCCCCC;
	}

	.input-icon1 {
		position: absolute;
		width: 38rpx;
		height: 40rpx;
	}

	.input-icon2 {
		position: absolute;
		width: 32rpx;
		height: 44rpx;
	}

	.input-score {
		margin-left: 64rpx;
		color: #464646;
		font-size: 28rpx;
		flex: 1;
		height: 100%;
	}

	.center-column {
		display: flex;
		justify-content: center;
	}

	.outbutton {
		width: 100%;
		height: 76rpx;
		border-radius: 38rpx;
		margin: 148rpx 0 0 0;
		background: #FF3B0A;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 76rpx;
	}
</style>